<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>异步请求</title>
</head>
<body>
    <input id="btn1" type="button" value="get请求">
    <input id="btn2" type="button" value="post请求">

    <div id="d">

    </div>
</body>
<script>

    document.getElementById("btn2").onclick = function(){
        let xhr =  new XMLHttpRequest();
        // false :0, false ,null
        if(! xhr) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        let user = {"id":1, "username": "孙浩", "sex": "男", "address":"北京北科"};
        let json = JSON.stringify(user);

        //状态值改变 即会触发方法
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
            }
        }

        //配置请求参数
        xhr.open("post", "/test?", true);
        //如果是post请求，可以在send方法中设置要传递的参数
        xhr.send(json);
    }


    document.getElementById("btn1").onclick = function(){
        //异步请求的对象
        //ajax 请求在服务端不能发生路径跳转
        let xhr =  new XMLHttpRequest();
        // false :0, false ,null
        if(! xhr) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        console.log(xhr.readyState);
        xhr.onreadystatechange =function(){
            console.log(xhr.readyState);
            // readyState = 4表示请求已完成，但不一定是成功的
            // xhr.status = 200 表示请求成功
            if(xhr.readyState == 4 && xhr.status == 200) {
                let text = xhr.responseText;
                console.log(text);

                document.getElementById("d").innerText = text;
            }
        }
        //配置请求 所需的参数
        /**
         * 参数1： 请求类型（get， post）\
         * 参数2： url路径（服务器的路径）
         * 参数3：async（boolean： true（异步）， false（ 同步））
         */
        xhr.open("get", "/test?id=1&username=mazihang", true);

        //发送请求
        xhr.send();
        //onreadystatechange 事件： 当状态值改变时触发事件


    }
</script>
</html>